<template>
  <div>
    <el-card>
      <el-table
          :data="tableData"
          border
          style="width: 100%"
          highlight-current-row
          class="majorTable"
      >
        <el-table-column
            label="序号"
            type="index"
            :index="indexMethod"
            align="center"
            width="90px">
        </el-table-column>
        <el-table-column
            prop="majorNo"
            label="专业编号"
            width="110"
            align="center">
        </el-table-column>
        <el-table-column
            prop="majorName"
            label="专业名称"
            width="170"
            align="center">
        </el-table-column>
        <el-table-column
            prop="majorDirectorName"
            label="专业主任"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            prop="facultyName"
            label="所属院系"
            align="center">
        </el-table-column>
        <el-table-column
            prop="status"
            align="center"
            width="110"
            label="目标状态">
          <template slot-scope="scope" >
            <el-tag v-if="scope.row.status === 1" type="success" size="medium">正常</el-tag>
            <el-tag v-if="scope.row.status === 2" type="warning" size="medium">暂停</el-tag>
            <el-tag v-if="scope.row.status === 3" type="danger" size="medium">撤销</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="methodType"
            align="center"
            width="110"
            label="动作状态">
          <template slot-scope="scope" >
            <el-tag v-if="scope.row.methodType === 1" type="success" size="medium">新增</el-tag>
            <el-tag v-if="scope.row.methodType === 2" type="warning" size="medium">修改</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="checkStatus"
            align="center"
            width="120"
            label="审核状态">
          <template slot-scope="scope" >
            <el-tag v-if="scope.row.checkStatus === 3" type="success" size="medium">审核通过</el-tag>
            <el-tag v-if="scope.row.checkStatus === 2" type="warning" size="medium">待审核</el-tag>
            <el-tag v-if="scope.row.checkStatus === 4" type="danger" size="medium">驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="checkDate"
            label="申请时间"
            width="160"
            align="center">
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            width="150px"
        >
          <template slot-scope="scope">
            <el-button @click="handleClickPass(scope.row)" type="success" size="small" v-if="scope.row.checkStatus == 2 ">通过</el-button>
            <el-button @click="handleClickReject(scope.row)" type="danger" size="small" v-if="scope.row.checkStatus == 2 ">驳回</el-button>
            <el-button @click="handleClickShow(scope.row)" type="primary" size="small" v-if="scope.row.checkStatus != 2 ">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageIndex"
          :page-sizes="[5, 10, 20, 30]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total.sync="total">
      </el-pagination>
    </el-card>
    <!--查看信息模态框-->
    <el-dialog title="专业信息" :visible.sync="dialogTableVisible" width="550px"   :close-on-click-modal='false' class="checkForm" >
      <el-form ref="majorForm" :model="checkMajorInfoModel" label-width="80px">
        <el-form-item label="专业编号" prop="title">
          <el-input v-model="checkMajorInfoModel.majorNo" readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="专业名称" prop="title">
          <el-input v-model="checkMajorInfoModel.majorName" readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="专业主任" prop="title">
          <el-input v-model="checkMajorInfoModel.majorDirectorName" readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="院系名称" prop="title">
          <el-input v-model="checkMajorInfoModel.facultyName" readonly="true"></el-input>
        </el-form-item>
        <!-- BUG，无法根据checkStatus来判断是否显示文本框 -->
        <el-form-item label="驳回原因" prop="rejectReason" >
            <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="checkMajorInfoModel.rejectReason"
                readonly="true">
            </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="closedialog">确 定</el-button>
      </div>
    </el-dialog>
    <!--驳回模态框-->
    <el-dialog title="专业信息" :visible.sync="dialogTableReject" width="550px"  :close-on-click-modal='false' class="rejectForm">
      <el-form ref="majorForm" :model="rejectMajorInfoModel" label-width="80px" :rules="rules">
        <el-form-item label="专业编号" prop="majorNo">
          <el-input v-model="rejectMajorInfoModel.majorNo" readonly="true" class="update_input"></el-input>
        </el-form-item>
        <el-form-item label="专业名称" prop="majorName">
          <el-input v-model="rejectMajorInfoModel.majorName" class="update_input" readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="专业主任" prop="majorDirector">
          <el-input v-model="rejectMajorInfoModel.majorDirectorName" class="update_input" readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="驳回原因" prop="rejectReason">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="rejectMajorInfoModel.rejectReason">
          </el-input>
        </el-form-item>
        <el-form-item label="院系名称" >
          <el-input v-model="rejectMajorInfoModel.facultyName" class="update_input" readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="title" >
          <el-radio-group v-model="rejectMajorInfoModel.status" disabled="true">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">暂停</el-radio>
            <el-radio :label="3">撤销</el-radio>
          </el-radio-group>
        </el-form-item>
        <div>
          <el-button @click="closeRejectdialog()">取 消</el-button>
          <el-button type="primary" @click="submitReject">确定</el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import {validateContacts} from "@/assets/utils/validate";
import {majorCheckInfo , checkPass} from "@/api/discipline/major/check"
export default {
  name: "MajorCheck",
  data:()=>({
    tableData : [],
    pageIndex: 1,
    pageSize: 10,
    total: 10,
    dialogTableVisible : false,
    dialogTableReject : false,
    rejectMajorInfoModel: {
      majorNo : '',
      majorName : '',
      majorDirectorName : '',
      facultyName : '',
      status : '',
      rejectReason:'',
      methodType: ''
    },
    checkMajorInfoModel:{
      majorNo : '',
      majorName : '',
      majorDirectorName : '',
      facultyName : '',
      status : '',
      rejectReason:''
    },
    rules : {
      rejectReason: [
        {required: true, message: '请输入驳回原因', trigger: 'blur'}, {validator: validateContacts, trigger: "blur"}
      ]
    }
  }),
  methods:{
    indexMethod(index){
      let curpage = this.pageIndex   //单前页码，具体看组件取值
      let limitpage = this.pageSize   //每页条数，具体是组件取值
      return (index+1) + (curpage-1)*limitpage
    },
    //显示所有审核记录
    showAllMajorCheck() {
      let params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      }
      majorCheckInfo(params).then(response =>{
        this.tableData = response.data.list
        this.pageSize = response.data.pageSize;
        this.pageIndex = response.data.pageNum;
        this.total = response.data.total;
      })
    },
    //所在页尺寸改变时
    handleSizeChange(){
      this.showAllMajorCheck();
    },
    //所在页页码改变时
    handleCurrentChange(){
      this.showAllMajorCheck();
    },
    //审核通过
    handleClickPass(row){
      let checkType = "1";
      let majorNo = row.majorNo;
      let methodType = row.methodType
      let params = {
        checkType , majorNo , methodType
      }
      this.$confirm("是否确认审核?","系统提示",{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() =>{
        checkPass(params).then(response =>{
          if(response.errorCode === "201"){
            this.$message({
              message: '审核成功',
              type: 'success'
            });
          }else if(response.errorCode === "500"){
            this.$message({
              message: '审核失败，请联系管理员',
              type: 'warning'
            });
          }else if(response.errorCode === "901"){
            this.$message({
              message: '系统异常',
              type: 'warning'
            });
          }
          this.showAllMajorCheck()
        })
      })


    },
    //打开审核驳回模态框
    handleClickReject(row){
      this.dialogTableReject = true
      this.rejectMajorInfoModel.majorDirectorName = row.majorDirectorName;
      this.rejectMajorInfoModel.facultyName = row.facultyName;
      this.rejectMajorInfoModel.majorName = row.majorName;
      this.rejectMajorInfoModel.majorNo = row.majorNo
      this.rejectMajorInfoModel.status = row.status
      this.rejectMajorInfoModel.methodType = row.methodType
    },
    //打开查看模态框
    handleClickShow(row){
      this.dialogTableVisible = true
      this.checkMajorInfoModel.majorDirectorName = row.majorDirectorName;
      this.checkMajorInfoModel.facultyName = row.facultyName;
      this.checkMajorInfoModel.majorName = row.majorName;
      this.checkMajorInfoModel.majorNo = row.majorNo
      this.checkMajorInfoModel.status = row.status
      this.checkMajorInfoModel.rejectReason = row.rejectReason
    },
    //审核驳回
    submitReject(){
      let majorNo = this.rejectMajorInfoModel.majorNo
      let rejectReason = this.rejectMajorInfoModel.rejectReason;
      let checkType = "2";
      let methodType = this.rejectMajorInfoModel.methodType
      let params = {
        majorNo , rejectReason,checkType , methodType
      }
      this.$refs.majorForm.validate((valid) =>{
        if(!valid) {
          this.$message("存在非法字符");
          return false;
        }else {
          this.$confirm("是否确认驳回?","系统提示",{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() =>{
            checkPass(params).then(response =>{
              this.showAllMajorCheck()
              if(response.errorCode === "201"){
                this.$message({
                  message: '驳回成功',
                  type: 'success'
                });
              }else if(response.errorCode === "500"){
                this.$message({
                  message: '驳回失败，请联系管理员',
                  type: 'warning'
                });
              }else if(response.errorCode === "901"){
                this.$message({
                  message: '驳回失败，系统异常',
                  type: 'warning'
                });
              }
            })
            this.closeRejectdialog()
          })
        }
      })

    },
    //关闭驳回模态框
    closeRejectdialog(){
      this.dialogTableReject = false
      this.reset()
    },
    reset(){
      this.$refs['majorForm'].resetFields();
    },
    //关闭查看模态框
    closedialog() {
      this.dialogTableVisible = false
    },

  },
  created(){
    this.showAllMajorCheck()
  }
}
</script>

<style scoped>

</style>
